<template>
    <div>
        <!-- 1、顶部通栏 -->
        <AppTopNav />
        <!-- 2、头部区域 -->
        <MyHeader />
        <!-- 分类盒子 -->
        <div class="class">
            <div class="w">
                <!-- 导航 -->
                <p class="Navigation">
                    <a href="#">首页</a> > <span>美食</span>
                </p>
                <!-- 盒子 -->
                <div class="item">
                    <!-- 分类 -->
                    <div class="fenlei">
                        <span class="text">分类：</span>
                        <div class="all">
                            <a href="#" class="alltext" v-for="(item, index) in 20" :key="index">全部</a>
                        </div>
                    </div>
                    <!-- 排序 -->
                    <div class="paixu">
                        <span class="text">排序：</span>
                        <div class="all">
                            <a href="#" class="alltext active">默认</a>
                            <a href="#" class="alltext">
                                <span>价格</span>
                                <i></i>
                            </a>
                            <span>￥<input v-model.number="ip1" type="text"> - <input v-model.number="ip2"
                                    type="text"></span>
                            <span class="queren"><button @click="btnOK">确定</button><a href="javascript:;"
                                    @click="clear">清空</a></span>
                        </div>
                    </div>
                    <list :goodslist="newlist" :isShowList="isShowList"></list>
                </div>
            </div>
        </div>
    </div>


</template>

<script setup>
import list from '@/components/List.vue'
import AppTopNav from "@/components/AppTopNav.vue";
import MyHeader from '@/components/MyHeader.vue'
import axios from 'axios';
import { computed, onMounted, provide, ref } from 'vue';
const isShowList = ref(false)
const oldlist = ref([])
const goodslist = ref([])
const newlist = ref([])
const ip1 = ref('')
const ip2 = ref('')
async function getGoods() {
    const { data } = await axios.get('http://localhost:3001/goods')
    console.log(data);
    goodslist.value = data
    // oldlist.value = data
    newlist.value = data
}
onMounted(() => {
    getGoods()
})

// 筛选方法
function shaixuan() {
    newlist.value = []
    goodslist.value.forEach((item) => {
        if (ip1.value <= item.price && item.price <= ip2.value) {
            newlist.value.push(item)
        }
    })
}
function clear() {
    ip1.value = ''
    ip2.value = ''
    newlist.value = goodslist.value
}

function btnOK() {
    if (ip1.value === '' || ip2.value === '') {
        return alert('请输入区间值')
    }
    shaixuan()
}

</script>

<style lang="less" scoped>
.class {
    background-color: rgba(241, 241, 241, 0.814);
    padding-top: 15px;
    padding-bottom: 30px;

    .Navigation {

        padding-bottom: 15px;
        font-size: 10px;

        span {
            color: #ccc;
        }

    }

    .item {
        // height: 500px;
        padding: 25px 40px;
        background-color: #fff;

        .fenlei {
            display: flex;
            border-bottom: 1px dashed #dedede;
            margin: 10px 0;

            .text {
                display: block;
                height: 26px;
                font-size: 14px;
                color: #999;
                margin-right: 20px;
            }

            .active {
                color: #c1a280;
            }

            .all {
                display: flex;
                flex-wrap: wrap;
                width: 930px;

                .alltext {
                    float: left;
                    margin-right: 25px;
                    margin-bottom: 16px;
                    font-size: 14px;
                }
            }
        }

        .paixu {
            height: 30px;
            display: flex;
            border-bottom: 1px dashed #dedede;
            margin: 10px 0;
            line-height: 20px;
            
            .text {
                display: block;
                height: 26px;
                font-size: 14px;
                color: #999;
                margin-right: 20px;
            }

            .active {
                color: #c1a280;
            }

            .all {
                display: flex;
                flex-wrap: wrap;
                width: 930px;

                .alltext {
                    float: left;
                    margin-right: 25px;
                    margin-bottom: 16px;
                    font-size: 14px;
                }

                input {
                    width: 63px;
                    height: 20px;
                }

                .queren {
                    button {
                        // color: #ccc;
                        background-color: #f5f5f5;
                        margin-right: 10px;
                        margin-left: 10px;
                        text-align: center;
                        width: 60px;
                        height: 26px;
                        line-height: 24px;
                        border: 1px solid #ccc;
                        border-radius: 2px;
                        cursor: pointer;
                    }

                    a {
                        color: #999;
                        background-color: #fff;
                    }

                    a:hover {
                        color: #b4a078;
                    }
                }
            }
        }
    }
}
</style>